<template>
  <div>
    <cart-head
      :title="$route.name"
      @clickDel="clickDel"
      :delText="showDel ? '完成' : '管理'"
    />
    <div class="wrap">
      <div class="items-wrap">
        <van-swipe-cell v-for="item in items" :key="item.id">
          <div class="item">
            <van-checkbox v-model="item.selected" @change="setSeclect(item.key,item.selected)"/>
            <van-card
              :num="item.number"
              :price="item.price"
              :title="item.name"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper @change="changeNum(item.key, item.number)" v-model="item.number" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              @click="delItem(item.key)"
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>
    <my-tabbar />
    <!-- 提交订单栏 -->
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      <template #tip>
        <div v-show="showDel" class="tip" style="display:flex;justify-content:flex-end">
          <van-button size="small" style="height: 20px" type="danger" @click="delCheckedItem">删除</van-button>
        </div>
      </template>
    </van-submit-bar>
    <!-- 提交订单栏 -->
  </div>
</template>

<script>
import MyTabbar from '../../components/MyTabbar.vue'
import CartHead from './components/CartHead.vue'
import { fetchCartItems, setCartItemNum, delCartItem, setCartItemSelect } from '_api'
import { getToken } from '_utils'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      showDel: false,
      total: 0,
      items: [],
      number: 0
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    setSeclect (key, selected) {
      // 点击切换商品选中状态
      setCartItemSelect({
        key,
        selected,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.total = res.data.data.price
          this.items = res.data.data.items
          this.number = res.data.data.number
        }
      })
    },
    delCheckedItem () {
      // 删除全部选中商品
      // 去除未选中商品
      const checkedItem = this.items.filter(item => item.selected)
      // 定义一个数组 存储 所有选中商品的key
      const checkedKeys = []
      checkedItem.forEach(item => {
        checkedKeys.push(item.key)
      })
      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗'
      })
        .then(() => {
          delCartItem({
            key: checkedKeys.join(','),
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              this.total = res.data.data.price
              this.items = res.data.data.items
              this.number = res.data.data.number
              this.showDel = false
            }
            if (res.data.code === 700) {
              // 商品全部删除
              this.total = 0
              this.items = []
              this.number = 0
              this.showDel = false
            }
          })
        })
    },
    delItem (key) {
      // 删除商品
      Dialog.confirm({
        title: '删除商品',
        message: '您确认删除吗'
      })
        .then(() => {
          delCartItem({
            key,
            token: getToken()
          }).then(res => {
            if (res.data.code === 0) {
              this.total = res.data.data.price
              this.items = res.data.data.items
              this.number = res.data.data.number
            }
            if (res.data.code === 700) {
              // 商品全部删除
              this.total = 0
              this.items = []
              this.number = 0
            }
          })
        })
    },
    changeNum (key, number) {
      // 修改购物车商品购买数量
      setCartItemNum({
        key,
        number,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.total = res.data.data.price
          this.items = res.data.data.items
          this.number = res.data.data.number
        }
      })
    },
    onSubmit () {
      // 点击跳转到创建订单页
      this.$router.push('/orderCreate')
    },
    fetchItems () {
      // 获取购物车数据
      fetchCartItems({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.total = res.data.data.price
          this.items = res.data.data.items
          this.number = res.data.data.number
        }
      })
    },
    // 点击头部管理商品按钮
    clickDel () {
      this.showDel = !this.showDel
    }
  },
  computed: {
    allChecked: {
      // 全选
      get () {
        return this.items.every(item => item.selected)
      },
      set (allChecked) {
        // 点击全选修改所有商品选中状态
        // 保存所有商品的key
        const keys = []
        this.items.forEach(item => {
          keys.push(item.key)
        })
        setCartItemSelect({
          key: keys.join(','),
          selected: allChecked,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.total = res.data.data.price
            this.items = res.data.data.items
            this.number = res.data.data.number
          }
        })
      }
    }
  },
  watch: {
    items (newVal) {
      this.$store.commit('cart/init_cart_info', {
        items: this.items,
        buyNumber: this.number
      })
    }
  },
  components: { MyTabbar, CartHead },
  name: 'Cart'
}
</script>

<style lang="scss" scoped>
.wrap {
  padding-top: 46px;
  padding-bottom: 116px;
  .delete-button {
    height: 100%;
  }
  .item {
    display: flex;
    background-color: #fafafa;
    .van-checkbox {
      margin: 0 10px;
    }
    .van-card {
      flex: 1;
    }
  }
}
  /deep/ .van-submit-bar__tip{
    background-color: #fff;
  }
  .van-submit-bar{
    bottom: 50px;
  }
</style>
